<template>
  <div class="com-container">
    <span class="title">专业热度榜</span>
    <div class="com-dv" ref="majorRoll_ref">
      <dv-scroll-ranking-board :config="config" style="width: 100%; height: 100%"/>
    </div>
  </div>
</template>

<script>
export default {
  props: ['admissionyear','academy','status'],
  watch: {
    admissionyear: {
      handler(newValue,oldValue) {
        this.getData()
      }
    },
    academy: {
      handler(newValue,oldValue) {
        this.getData()
      }
    },
    status: {
      handler(newValue,oldValue) {
        this.getData()
      }
    }
  },
  data() {
    return {
      allData: [],
      config: {
        data: []
      },
    };
  },
  mounted() {
    this.getData();
    window.addEventListener("resize", this.screenAdapter());
    this.screenAdapter();
  },
  //在组件销毁时，进行监听事件的取消
  destroyed() {
    window.removeEventListener("resize", this.screenAdapter())
  },
  methods: {
    // 数据
    getData() {

      this.request.get("/stuScreen/major", {
        params: {
          admissionyear: this.admissionyear,
          academy: this.academy
        }
      }).then(res => {
        if (res.code == 20041) {
          this.allData = res.data
        }
      }).finally(() => {
        this.updateChart()
      })
    },
    //   更新图表
    updateChart() {
      this.config.data = this.allData
      //使用ES6拓展运算符生成新的props对象,组件侦知数据变化 自动刷新状态(取自datav官网,若无此句则不会更新config)
      this.config = {...this.config}
    },
    screenAdapter() {
    },
  },
};
</script>
// 设置为scoped，仅在本页面生效
<style lang="less" scoped>
.com-dv {
  margin-left: 1%;
  width: 98%;
  height: 88%;
  margin-top: 6%;
}

.com-container {
  border-radius: 20px;
  background-color: #222733;
}

.title {
  position: absolute;
  margin-left: 2%;
}
</style>
